<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 
    ■视口的概念：
      口在一个浏览器中，我们可以看到的区域就是视口(viewport);
      口我们说过fixed就是相对于视口来进行定位的；
      口在PC端的页面中，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个；
    ■但是在移动端，不太一样，你布局的视口和你可见的视口是不太一样的。
      口这是因为移动端的网页窗口往往比较小，我们可能会希望一个大的网页在移动端可以完整的显示；
      口所以在默认情况下，移动端的布局视口是大于视觉视口的；
    ■所以在移动端，我们可以将视口划分为三种情况：
      口布局视口(layout viewport)默认宽度980px，转到移动端会按比例缩小，元素的宽度是以布局视口宽度为比例；
        ■默认情况下，一个在PC端的网页在移动端会如何显示呢?
          口第一，它会按照宽度为980px来布局一个页面的盒子和内容；
          口第二，为了显示可以完整的显示在页面中，对整个页面进行缩小；

      口视觉视口(visual layout)
        ■视觉视口(visual viewport)
          口如果默认情况下，我们按照980px显示内容，那么右侧有一部分区域就会无法显示，
            所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中；
          口那么显示在可见区域的这个视口，就是视觉视口(visual viewport)

      口理想视口(ideal layout)
        设置布局视口为理想视口，宽度为设备屏幕的宽度；
        <meta name="viewport" content="width=device-width" width的值越大，视觉视口越小，反之越大；width=2000px
        其它值看ppt
  -->

  <!-- width: 设置布局视口的宽度 ,移动端适配-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, 
  user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .box {
      /* 布局视口width=100px,合子的宽度与视觉视口一样宽 */
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>